<template>
    <!-- 按钮区域 -->
    <el-input v-model="input" placeholder="Please input" clearable />
    <el-button :icon="Search" circle />
    <!-- 数据展示区域 -->
    <el-table 
    :data="tableData" 
    border style="width: 100%"
    @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="sno" label="学号" width="180" />
        <el-table-column prop="name" label="姓名" width="180" />
        <el-table-column prop="age" label="年龄" width="180" />
        <el-table-column prop="gender" label="性别" width="180" />
        <el-table-column prop="address" label="地址" width="200"/>
        <el-table-column prop="tel" label="联系方式" width="200"/>
        <el-table-column label="操作" width="100">
            <el-button link type="primary" size="small" @click="handleEdit">编辑</el-button>
            <el-button link type="danger" size="small" @click="handleDelete">删除</el-button>
        </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <el-pagination 
    background 
    layout="total, sizes, prev, pager, next, jumper" 
    :total="400" 
    small 
    @size-change="handleSizeChange" 
    @current-change="handleCurrentChange"/>
    <!-- 编辑的dialog -->
    <el-dialog v-model="dialogEditVisible" title="编辑学生信息" width="500">
        <el-form :model="form">
            <el-form-item label="日期" :label-width="formLabelWidth">
                <div class="block">
                    
                    <el-date-picker
                        v-model="form.date"
                        type="date"
                        placeholder="请选择日期"
                        :size="size"
                    />
                </div>
            </el-form-item>
            <el-form-item label="姓名" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="地址" :label-width="formLabelWidth">
                <el-select
                    v-model="form.address"
                    class="m-2"
                    placeholder="请选择你的地址"
                    style="width: 240px"
                >
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    />
                </el-select>
            </el-form-item>
                <span class="dialog-footer">
                    <el-button @click="dialogEditVisible = false">取消</el-button>
                    <el-button type="primary" @click="dialogEditVisible = false">
                    确认
                    </el-button>
                </span>
        </el-form>
    </el-dialog>
    <!-- 删除的dialog -->
    <el-dialog
    v-model="dialogDeleteVisible"
    title="提示"
    width="30%"
    >
    <span>本操作不可逆，确定要删除吗？</span>
    <template #footer>
        <span class="dialog-footer">
            <el-button @click="dialogDeleteVisible = false">取消</el-button>
            <el-button type="primary" @click="dialogDeleteVisible = false">
                确定
            </el-button>
        </span>
    </template>
    </el-dialog>
</template>

<script lang="ts" setup>
    import { onMounted, reactive, ref } from 'vue'
    import { Search } from '@element-plus/icons-vue'
    // 引入axios
    import axios from 'axios'

    // 绑定输入框的数据
    const input = ref('')
    interface Student {
        sno: string
        name: string
        age: number
        gender: string
        address: string
        tel: string
    }
    const size = ref<'default' | 'large' | 'small'>('default')
    // 定义一下统一的label的长度
    const formLabelWidth = '140px'
    // 表单数据
    const form = reactive({
        sno: '',
        name: '',
        age: 0,
        gender: '',
        address: '',
        tel: ''
    })
    // 定义一些对象值
    const multipleSelection = ref<Student[]>([])
    // 定义编辑的对话框
    const dialogEditVisible = ref(false)
    // 定义删除的对话框
    const dialogDeleteVisible = ref(false)
    const tableData= ref<Student[]>([])
    const options = [
    {
        value: 'ty',
        label: '太原市',
    },
    {
        value: 'sh',
        label: '上海市',
    },
    {
        value: 'bj',
        label: '北京市',
    }
    ]
    // 当每页的条数发生变化的时候触发
    const handleSizeChange = (val: number) => {
        console.log(`${val} items per page`)
    }
    // 当页码发生变化的时候触发
    const handleCurrentChange = (val: number) => {
        console.log(`current page: ${val}`)
    }
    // 表格checkbox事件
    const handleSelectionChange = (val: User[]) => {
        multipleSelection.value = val
    }
    // 编辑按钮事件
    const handleEdit = () => {
        dialogEditVisible.value = true
    }
    // 删除按钮事件
    const handleDelete = () => {
        dialogDeleteVisible.value = true
    }
    // 钩子函数，在挂载成功之后，发送请求，获取所有的学生数据
    onMounted(() => {
        axios.get('http://127.0.0.1:4523/m1/7105126-6827064-default/student/getAll')
                    .then(function (response) {
                        console.log(response.data);
                        tableData.value=response.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
    })


</script>

<style scoped>
    /* 文本框和dialog的样式 */
    .el-button--text {
    margin-right: 15px;
    }
    .el-select {
    width: 300px;
    }
    .el-input {
    width: 300px;
    }
    .dialog-footer button:first-child {
    margin-right: 10px;
    }

    /* 时间选择器的样式 */
    .demo-date-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
    }

    .demo-date-picker .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
    }

    .demo-date-picker .block:last-child {
    border-right: none;
    }

    .demo-date-picker .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
    }


</style>